<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Emp表的CRUD操作</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>

<div id="app">
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1" @click="showSaveForm">添加员工</el-menu-item>
        <el-menu-item index="2">消息中心</el-menu-item>
        <el-menu-item index="3">订单管理</el-menu-item>
    </el-menu>
    <!--表格-->
    <el-table
            :data="tableData"
            style="width: 100%;margin: auto">
        <el-table-column
                fixed
                prop="empNo"
                label="编号"
                width="120">
        </el-table-column>
        <el-table-column
                prop="ename"
                label="姓名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="job"
                label="职位"
                width="120">
        </el-table-column>
        <el-table-column
                prop="mgr"
                label="上司ID"
                width="120">
        </el-table-column>
        <el-table-column
                prop="hireDate"
                label="入职时间"
                width="300">
        </el-table-column>
        <el-table-column
                prop="sal"
                label="工资"
                width="100">
        </el-table-column>
        <el-table-column
                prop="comm"
                label="奖金"
                width="100">
        </el-table-column>
        <el-table-column
                prop="deptNo"
                label="部门ID"
                width="100">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="180">
            <template slot-scope="scope">
                <el-button
                        type="text"
                        @click="showUpdateForm(scope.row)"
                        class="el-icon-edit">
                </el-button>
                <el-button
                        type="text"
                        @click="removeEmp(scope.row)"
                        class="el-icon-delete-solid">
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            style="margin: auto;text-align: center"
            @current-change="loadEmpData"
            @size-change="changePageSize"
            :total="pageInfo.total">
    </el-pagination>

    <!--添加的模态框-->
    <el-dialog title="添加员工" :visible.sync="dialogSaveFormVisible">
        <el-form :model="saveForm">
            <el-form-item label="用户姓名" label-width="120px">
                <el-input v-model="saveForm.ename" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职位" label-width="120px">
                <el-input v-model="saveForm.job" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上司" label-width="120px">
                <el-input v-model="saveForm.mgr" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工资" label-width="120px">
                <el-input v-model="saveForm.sal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="奖金" label-width="120px">
                <el-input v-model="saveForm.comm" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门" label-width="120px">
                <el-input v-model="saveForm.deptNo" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogSaveFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveEmp">确 定</el-button>
        </div>
    </el-dialog>

    <!--修改的模态框-->
    <el-dialog title="修改员工" :visible.sync="dialogUpdateFormVisible">
        <el-form :model="updateForm">
            <el-form-item label="用户姓名" label-width="120px">
                <el-input v-model="updateForm.ename" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职位" label-width="120px">
                <el-input v-model="updateForm.job" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上司" label-width="120px">
                <el-input v-model="updateForm.mgr" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工资" label-width="120px">
                <el-input v-model="updateForm.sal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="奖金" label-width="120px">
                <el-input v-model="updateForm.comm" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门" label-width="120px">
                <el-input v-model="updateForm.deptNo" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogUpdateFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateEmp">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
</html>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                pageInfo: {},
                tableData: [],
                size: 10,
                activeIndex: 1,
                dialogSaveFormVisible: false,
                saveForm: {
                    ename: '',
                    job: '',
                    mgr: '',
                    sal: '',
                    comm: '',
                    deptNo: ''
                },
                dialogUpdateFormVisible: false,
                updateForm: {
                    ename: '',
                    job: '',
                    mgr: '',
                    sal: '',
                    comm: '',
                    deptNo: '',
                    empNo: ''
                }
            }
        },
        methods: {
            loadEmpData(page) {
                axios({
                    method: 'get',
                    url: 'emp',
                    params: {
                        page: page,
                        size: this.size,
                        method: 'page'
                    }
                }).then(resp => {
                    this.pageInfo = JSON.parse(resp.data.data)
                    console.log(this.pageInfo)
                    this.tableData = this.pageInfo.list
                })
            },
            changePageSize(newSize) {
                this.size = newSize
                this.loadEmpData(this.pageInfo.pageNum)
            },
            removeEmp(row) {
                // 1. 询问
                this.$confirm('此操作将永久删除【' + row.ename + '】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 继续
                    // 2. 向后端发送请求传递一个参数
                    axios({
                        method: 'delete',
                        url: 'emp',
                        params: {
                            empNo: row.empNo,
                            method: 'delete'
                        }
                    }).then(resp => {
                        if (resp.data.success) {
                            this.$message({
                                message: '恭喜你，成功删除一名员工',
                                type: 'success'
                            });
                            this.loadEmpData(1)
                        } else {
                            this.$message({
                                message: '很遗憾，删除失败',
                                type: 'error'
                            });
                        }

                    })
                }).catch(() => {
                    // 反悔了
                    this.$message({
                        message: '取消删除',
                        type: 'info'
                    });
                });
            },
            showSaveForm() {
                this.dialogSaveFormVisible = true
            },
            saveEmp() {
                let data = new URLSearchParams()
                data.append('ename', this.saveForm.ename)
                data.append('job', this.saveForm.job)
                data.append('mgr', this.saveForm.mgr)
                data.append('sal', this.saveForm.sal)
                data.append('comm', this.saveForm.comm)
                data.append('deptNo', this.saveForm.deptNo)
                data.append('method', 'save')
                axios({
                    method: 'post',
                    url: 'emp',
                    data: data
                }).then(resp => {
                    if (resp.data.success) {
                        this.dialogSaveFormVisible = false
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.loadEmpData(1)
                    } else {
                        this.$message({
                            message: resp.data.error,
                            type: 'error'
                        });
                    }
                })
            },
            showUpdateForm(row) {
                this.dialogUpdateFormVisible = true
                this.updateForm = row
            },
            updateEmp() {
                let data = new URLSearchParams()
                data.append('ename', this.updateForm.ename)
                data.append('job', this.updateForm.job)
                data.append('mgr', this.updateForm.mgr)
                data.append('sal', this.updateForm.sal)
                data.append('comm', this.updateForm.comm)
                data.append('deptNo', this.updateForm.deptNo)
                data.append('empNo', this.updateForm.empNo)
                data.append('method', 'update')
                axios({
                    method: 'post',
                    url: 'emp',
                    data: data
                }).then(resp => {
                    if (resp.data.success) {
                        this.loadEmpData(1)
                        this.dialogUpdateFormVisible = false
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: '修改失败',
                            type: 'error'
                        });
                    }
                })
            }
        },
        created() {
            this.loadEmpData(1)
        }
    })
</script>